﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>aframe-gif-shader</title>
  <script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-master.min.js"></script>
  <script src="./dist/aframe-gif-shader.js"></script>
</head>
<body>
  <a-scene vr-mode-ui="enabled:false;">
    <a-entity position="0 0 -100" geometry="primitive:plane; width:200; height:200" gif-shader="src:./images/02.gif; repeat:2,2; play:false"></a-entity>
    <a-entity position="1 0 -3" geometry="primitive:box;" gif-shader="src:./images/04.gif; speed:1; side:double;"></a-entity>
    <a-entity position="-1 0 -3" geometry="primitive:sphere;radius:.7;" gif-shader="src:./images/01.gif; blending:additive;"></a-entity>
  </a-scene>

  <script type="module">
    import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/+esm';
    document.querySelector('a-scene').addEventListener('loaded', (e) => {
      const pane = new Pane({title:'aframe-gif-shader'});
      const targets = Array.from(document.querySelectorAll('a-entity[gif-shader]'));
      targets.forEach(el => {
        const folder = pane.addFolder({title: el.getAttribute('geometry').primitive});
        folder.addBinding(el.getAttribute('gif-shader'), 'play').on('change', (e) => {
          el.setAttribute('gif-shader', {play:e.value});
        });
        folder.addBinding(el.getAttribute('gif-shader'), 'speed', {min:0, max:10, step:1}).on('change', (e) => {
          el.setAttribute('gif-shader', {speed:e.value});
        });
      });
    });
  </script>
</body>
</html>